.post-editor__sidebar {
	@extend .sidebar;
	background: lighten( $gray, 30% );
	left: auto;
	right: -273px;
	border-left: 1px solid darken( $sidebar-bg-color, 5% );
	border-top: 1px solid darken( $sidebar-bg-color, 5% );
	border-right: none;
	top: 93px;
	transition: all 0.15s cubic-bezier(0.075, 0.82, 0.165, 1);

	.focus-sidebar & {
		transform: translateX(-273px);
	}

	.focus-sidebar .is-loading & {
		transition: none;
	}

	@include breakpoint( "<660px" ) {
		position: relative;
		top: 0;
		left: 0;
		height: 0;
		transition: none;

		.focus-sidebar & {
			height: auto;
			transform: none;
			transition: none;
		}
	}
}

.editor-sidebar__header {
	background: lighten( $gray, 30% );
	display: none;
	font-size: 13px;
	color: $gray-dark;
	font-weight: 500;

	@include breakpoint( ">660px" ) {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
		padding: 11px 15px 11px 16px;
	}
}

.editor-sidebar__close.button.is-compact.is-borderless {
	display: none;
	align-self: center;
	line-height: 12px;
	padding: 8px;
	white-space: nowrap;
	max-width: 50%;

	@include breakpoint( ">660px" ) {
		display: block;
	}
}

.editor-sidebar__toggle-sidebar {
	margin-left: 16px;
	@include breakpoint( ">660px" ) {
		display: none;
	}
}
